<template>
	<view>
		<!-- 自定义导航栏 -->
	<news-nav-bar 
	:tabBars="tabBars" 
	:tabIndex="tabIndex" 
	@change-tab="changeTab">
	</news-nav-bar>
	<!-- 轮播图 -->
	<view class="uni-tab-bar">
		<swiper class="swiper-box" 
		:style="{height:swiperheight+'px'}" 
		:current="tabIndex" 
		@change="tabChange">
		<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
					
				<!-- 列表 -->
				<block v-for="(item,index) in guanzhu.list" :key="index">
				 <common-list :item="item" :index="index"></common-list>
				</block>
				<!-- 上拉加载 -->
					<load-more :loadtext="guanzhu.loadtext"></load-more>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y class="list">
					
					<!-- 搜索框 -->
					<view class="search-input">
						<input class="uni-input" placeholder="搜索内容" placeholder-class="icon iconfont icon-sousuo topic-search" />
					</view>
					<!-- 轮播图 -->
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="topic-swiper">
						<block v-for="(item,index) in topic.swiper" :key="index">
						
						<swiper-item>
							<image :src="item.src" lazy-load></image>
						</swiper-item>
						</block>
					</swiper>
					<!-- 热门分类 -->
				<topic-nav :nav="topic.nav"></topic-nav>
					<!-- 最近更新 -->
					<view class="topic-new">
						<view>最近更新</view>
						<block v-for="(item,index) in topic.list" :key="index">
						<topic-list :item="item" :index="index"></topic-list>
							
						</block>
					
						
					</view>
					
					<!-- 完结 -->
				</scroll-view>
			</swiper-item>
			
		</swiper>
	</view>
	
	</view>
</template>

<script>
	
	import commonList from "../../components/commom/common-list.vue";
	import newsNavBar from "../../components/news/news-nav-bar.vue";
	import loadMore from "../../components/commom/load-more.vue";
	import topicNav from "../../components/news/topic-nav.vue";
	import topicList from "../../components/news/topic-list.vue";
	export default {
		components:{
			commonList,
			newsNavBar,
			loadMore,
			topicNav,
			topicList
		},
		data() {
			return {
				swiperheight:500,
				tabIndex:0,
				tabBars:[
					{name:'关注',id:'guanzhu'},
					{name:'话题',id:'huati'}
				],
				guanzhu:{
					loadtext:'上拉加载更多',
					list:[
							// 图文列表
							{
								userpic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3474094557,370758738&fm=11&gp=0.jpg',
								username: '一小熊',
								sex: 0, // 0：男， 1： 女
								age: 25,
								isguanzhu: false,
								title: '这个世界上肯定有另一个我，做着我不敢做的事，过着我想过的生活。',
								titlepic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2330694109,2832386411&fm=11&gp=0.jpg',
								video: false,
								share: false,
								path: '深圳 龙岗',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							},
							// 视频列表
							{
								userpic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1851283359,3457678391&fm=26&gp=0.jpg',
								username: '憨憨',
								sex: 1, // 0：男， 1： 女
								age: 20,
								isguanzhu: false,
								title: '你如果认识从前的我，也许你会原谅现在的我。',
								titlepic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2622623191,3152180496&fm=26&gp=0.jpg',
								video: {
									lonkNum: 2212,
									long: '2:22'
								},
								share: false,
								path: '上海 浦东',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							},
							// 分享列表
							{
								userpic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2860520628,1945387482&fm=26&gp=0.jpg',
								username: '琉璃',
								sex: 1, // 0：男， 1： 女
								age: 20,
								isguanzhu: false,
								title: '有时候，昨天的事恍若去年的，而去年的事恍若昨天的。严重的时候，居然觉得明天的事仿佛昨天的。',
								titlepic: '',
								video: false,
								share: {
									shareTile: '我只能送你到这里了，剩下的路你要自己走，不要回头。',
									shareTitlePic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3171973105,591900826&fm=26&gp=0.jpg'
								},
								path: '北京 朝阳',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							}
					]
				},
				
				topic:{
					swiper:[
						{src:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=36592849,907298286&fm=26&gp=0.jpg'},
						{src:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=881783326,3243771672&fm=11&gp=0.jpg'},
						{src:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1599007979,1484951390&fm=26&gp=0.jpg'},
					],
					nav:[
						{name:'最新'},
						{name:'游戏'},
						{name:'打卡'},
						{name:'情感'},
						{name:'故事'},
						{name:'喜爱'},
						
					],
					list:[
						{
						titlepic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=362701026,2797755293&fm=26&gp=0.jpg',
						title:'卡通动漫',
						desc:'动漫人物',
						totalnum:500,
						todaynum:100,
						},
						{
						titlepic:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1222490125,2759440418&fm=26&gp=0.jpg',
						title:'动物',
						desc:'可爱的动物',
						totalnum:300,
						todaynum:200,
						},
						{
						titlepic:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1941717697,3258612579&fm=26&gp=0.jpg',
						title:'你猜',
						desc:'可爱的动物',
						totalnum:300,
						todaynum:200,
						},
						{
						titlepic:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1941717697,3258612579&fm=26&gp=0.jpg',
						title:'你猜',
						desc:'可爱的动物',
						totalnum:300,
						todaynum:200,
						},
					]
				},
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=>{
					let height=res.windowHeight-uni.upx2px(100)
					this.swiperheight=height;
				}
			})
		
		},
		methods: {
			// 上拉加载
			loadmore(index){
				if(this.guanzhu.loadtext!="上拉加载更多"){
					return;
				}
				//修改状态
				this.guanzhu.loadtext="加载中...";
				// 获取数据
				setTimeout(()=>{
					//获取完成
					let obj={
							userpic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1650669267,1322865988&fm=11&gp=0.jpg',
							username: '梅长苏',
							sex: 0, // 0：男， 1： 女
							age: 18,
							isguanzhu: false,
							title: '我认为，每个人都有一个觉醒期，但觉醒的早晚决定个人的命运。',
							titlepic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=407849403,1177133812&fm=11&gp=0.jpg',
							video: false,
							share: false,
							path: '梅林 江左盟',
							commetNum: 22,
							shareNum: 99,
							zanNum: 33
						};
					this.guanzhu.list.push(obj)
					this.guanzhu.loadtext="上拉加载更多"
				},1000);
				// this.guanzhu.loadtext="没有更多数据了";
				
			},
			//点击切换
			changeTab(index){
				this.tabIndex=index;
			},
			//滑动事件
			tabChange(e){
				this.tabIndex=e.detail.current;
				
			}
		}
	}
</script>

<style>

.search-input{
	
	padding: 20upx;
}
.search-input>input{
	
	background: #F4F4F4;
	border-radius: 10upx;
}
.topic-search{
	display: flex;
	justify-content: center;
}
.topic-swiper{
	padding: 0 20upx 20upx 20upx;
}
.topic-swiper image{
	width: 100%;
	border-radius: 10upx;
}
.topic-new{
	padding: 20upx;
	
}
.topic-new>view:first-child{
	padding-bottom: 5upx;
	font-size: 32upx;
}

</style>
